<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .page {
      width: 100vw;
      height: 100vh;
      background-color: #EFEFEF;
      position: fixed;
      left: 0;
      top: 0;
    }

    .rMenu {
      width: 50vw;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      transform: translateX(100vw);
      background-color: skyblue;
      transition: transform 5s;
    }

    .active {
      transform: translateX(50vw);
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="page">首页
      <button @click="togglrMenu" type="button">切换侧边栏</button>
    </div>
    <div class="rMenu" :class="{active:isShow}">侧边栏</div>
  </div>
  <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        isShow: false
      },
      methods: {
        togglrMenu() {
          this.isShow = !this.isShow
        }
      }
    })
  </script>

</html>